@charset "utf-8";

/* Hschubin */
*{ margin : 0 ; padding : 0 }
html { font-family : "Microsoft YaHei" ; font-size : 625% ; color : #333 }
body { max-width : 640px ; padding-top : 1.06rem ; margin : auto ; font-size : .18rem ; background : #fff }
p,input { font-size : inherit }
a{ color : inherit ; text-decoration : none ; outline-style : none ; border : none }
ul,ol,li{ list-style : none }
img{ vertical-align : middle ; border : none ; display : inline-block ; max-width : 100% ; max-height : 100% }
a,button,input,textarea{ -webkit-tap-highlight-color : rgba(0,0,0,0) ; tap-highlight-color : rgba(0,0,0,0) }
b { font-weight : normal }
em,i{ font-style : normal }
h1,h2,h3,h4,h5,h6,strong{ font-weight : normal }
input, textarea { outline : none ; background : none ; border: none }
button { background-color : transparent ; border : none }


.clearfix{ *zoom : 1 }
.clearfix:before,.clearfix:after{ content : '' ; display : block ; height : 0 ; clear : both ;visibility : hidden }
.bl{ float : left ; display : inline-block }
.br{ float : right ; display : inline-block }
.main{ max-width : 6rem ; margin : 0 auto }
.img-box{ display : table-cell ; vertical-align : middle ; text-align : center }
.banner-other{ width : 100% ; max-width : 6.4rem ; margin : 0 auto }
.banner-other img{ width : 100% }
.col-1{ width : 100% ; float : left ; display : inline-block }
.col-2{ width : 50% ; float : left ; display : inline-block }
.col-3{ width : 33.33% ; float : left ; display : inline-block }
.col-4{ width : 25% ; float : left ; display : inline-block }





/* header */
.header { width : 100% ; max-width : 6.4rem ; height : 1.06rem ; background-color : #FFFFFF ; margin : auto ; position : absolute ; left : 0rem ; right : 0rem ; top : 0rem ; z-index : 3 }
.header .main { display : flex ; justify-content : space-between ; align-items : center ; max-width : 6.4rem ; height : 100% ; padding : 0rem 0.27rem 0rem 0.17rem ; box-sizing : border-box }
.header .main h1 { width : 3.48rem ; height : 0.48rem ; background-image : url(../images/header-logo-1.png) ; background-repeat : no-repeat ; background-position : center center ; background-size : 100% 100% ; white-space : nowrap ; text-indent : -9.99rem ; text-overflow : ellipsis ; overflow : hidden ; position : relative }
.header .main a { display : block ; width : 100%  ; height : 100% ; position : absolute ; left : 0rem ; top : 0rem }
.header .main .icon { display : flex ; align-items : center }
.header .main b { width : 0.34rem ; height : 0.34rem ; background-image : url(../images/header-icon-1.png) ; background-repeat : no-repeat ; background-position : center center ; background-size : 100% 100% ; margin-right : 0.47rem ; position : relative }
.header .main b::after { content : "" ; display : block ; width : 0.01rem ; height : 0.36rem ; background-color : #E5E5E5 ; position : absolute ; left : 0.56rem ; top : 50% ; transform : translateY(-50%) }
.header .main i { width : 0.38rem ; height : 0.31rem ; background-image : url(../images/header-icon-2.png) ; background-repeat : no-repeat ; background-position : center center ; background-size : 100% 100% }

/* .header.white { background-color : #FFFFFF ; border-bottom : none ; box-shadow : 0rem 0.04rem 0.08rem 0rem rgba(233, 233, 233, 0.51) }
.header.white .main b { background-image : url(../images/header-icon-1b.png) }
.header.white .main h1 { background-image : url(../images/header-logo-1b.png) }
.header.white .main i { background-image : url(../images/header-icon-2b.png) } */

.nav { display : none ; opacity : 0 ; position : absolute ; left : -3.76rem ; top : 0rem ; transition : .6s ; transition-timing-function : ease-out }
.nav .content { width : 3.76rem ; padding : 0.36rem 0.37rem 0rem 0.45rem ; background-color : rgba(0,0,0,0.87) ; box-sizing : border-box ; overflow-y : scroll }
.nav ul { padding-bottom : 0.38rem }
.nav li { border-bottom : solid 0.01rem #434343 }
.nav li a { display : block ; height : 0.85rem ;  padding-left : /* 0.63rem */0.2rem ; color : #FFFFFF ; font-size : 0.22rem ; line-height : 0.85rem ; position : relative }
.nav .nav-shop { padding-left : 0.19rem }
.nav .nav-shop a { display : block ; height : 0.25rem ; background-repeat : no-repeat ; background-position : left center ; background-size : auto 0.25rem ; margin-top : 0.3rem }
.nav .nav-shop a:first-of-type { margin-top : 0rem }
.nav i { display : block ; width : 0.6rem ; height : 0.6rem ; background-color : rgba(0,0,0,0.87) ; background-image : url(../images/nav-icon-11.png) ; background-position : center center ; background-repeat : no-repeat ; background-size : 0.25rem 0.25rem ; position : absolute ; right : -0.62rem ; top : 0rem }

.search { display : none ; width : 100% ; background-color : rgba(0,0,0,0.87) ; opacity : 0 ; position : absolute ; left : 0rem ; top : 0rem ; transition : .6s ; transition-timing-function : ease-out ; z-index : 4 }
.search i { display : block ; width : 0.6rem ; height : 0.6rem ; background-image : url(../images/nav-icon-11.png) ; background-position : center center ; background-repeat : no-repeat ; background-size : 0.25rem 0.25rem ; position : absolute ; right : 0.75rem ; top : 3.53% }
.search form { width : 4.8rem ; padding-bottom : 0.3rem ; border-bottom : solid 0.01rem #535353 ; font-size : 0rem ; position : absolute ; left : 50% ; bottom : 67.43% ; transform : translateX(-50%) }
.search input::-webkit-input-placeholder{ color : #C0C0C0 }
.search input::-moz-placeholder{ color : #C0C0C0 }
.search input:-moz-placeholder{ color : #C0C0C0 }
.search input:-ms-input-placeholder{ color : #C0C0C0 }
.search input[type="text"] { width : 4.35rem ; height : 0.45rem ; color : #C0C0C0 ; font-size : 0.18rem ; vertical-align : top }
.search input[type="submit"] { width : 0.45rem ; height : 0.45rem ; background-image : url(../images/nav-icon-12.png) ; background-position : center center ; background-repeat : no-repeat ; background-size : 0.29rem 0.29rem }





/* 副导航 */
.vice-nav { display : flex ; padding-top : 0.18rem ; border-bottom : solid 0.01rem #E3E3E3 }
.vice-nav h3 { width : 1.5rem ; height : 0.5rem ; background-color : #333333 ; color : #FFFFFF ; font-size : 0.18rem ; text-align : center ; line-height : 0.5rem }
.vice-nav ul { display : flex ; padding-left : 0.12rem ; position : relative }
.vice-nav ul::before { content : "" ; display : block ; width : 0.01rem ; height : 0.2rem ; background-color : #333333 ; position : absolute ; left : 0.33rem ; top : 0.16rem }
.vice-nav li { height : 0.5rem ; margin-left : 0.76rem ; color : #333333 ; font-size : 0.18rem ; text-align : center ; position : relative ; line-height : 0.5rem }
.vice-nav li::after { content : "" ; display : block ; width : calc(100% + 0.28rem) ; height : 0.02rem ; background-color : #EAC180 ; opacity : 0 ; position : absolute ; left : 50% ; bottom : -0.02rem ; transition : .5s ; transform : translateX(-50%) }
.vice-nav li.on::after { opacity : 1 }
.vice-nav a { display : block ; height : 100% }





/* footer */
.footer { padding : 0.36rem 0rem 1rem 0rem ; background-color : #F2F2F2 ; text-align : center }
.footer .top { max-width : 6rem ; padding-bottom : 65px ; margin : 0rem auto }
.footer .tel { padding-bottom : 0.25rem ; border-bottom : solid 0.01rem #DBDBDB }
.footer .tel b { display : block ; margin-bottom : 0.1rem ; color : #4E4E4E ; font-size : 0.24rem }
.footer .tel i { font-size : 0.36rem }
.footer .info { margin-top : 0.44rem ; color : #666666 ; font-size : 0.18rem ; line-height : 0.36rem }
.footer .qr { margin-top : 0.28rem ; font-size : 0rem }
.footer .qr>div { display : inline-block ; margin : 0rem 0.07rem }
.footer .qr .img-box { width : 1.92rem ; height : 1.92rem }
.footer .qr b { display : block ; margin-top : 0.28rem ; color : #4E4E4E ; font-size : 0.18rem }

.footer .bottom { height : 0.84rem ; background-color : #DEDEDE ; color : #666666 ; font-size : 0.18rem ; line-height : 0.84rem }





/* tabBar */
.tabbar { width : 6.4rem ; height : 1rem ; background-color : #000000 ; margin : 0rem auto ; position : fixed ; left : 0rem ; right : 0rem ; bottom : 0rem ; z-index : 2 }
.tabbar li { width : 25% ; height : 100% ; float : left ; text-align : center ; position : relative }
.tabbar li::after { content : "" ; display : block ; width : 0.01rem ; height : 0.69rem ; background-color : #666666 ; position : absolute ; right : -0.01rem ; top : 0.19rem }
.tabbar li:last-of-type::after { display : none }
.tabbar a { display : block ; height : 100% ; color : #FFFFFF ; font-size : 0.18rem ; overflow : hidden }
.tabbar a::before { content : "" ; display : block ; height : 0.36rem ; background-repeat : no-repeat ; background-position : center center ; margin : 0.19rem 0rem 0.14rem }
.tabbar li:first-of-type a::before { background-image : url(../images/tabbar-1.png) ; background-size : 0.35rem 0.35rem }
.tabbar li:nth-of-type(2) a::before { background-image : url(../images/tabbar-2.png) ; background-size : 0.34rem 0.34rem }
.tabbar li:nth-of-type(3) a::before { background-image : url(../images/tabbar-3.png) ; background-size : 0.44rem 0.36rem }
.tabbar li:last-of-type a::before { background-image : url(../images/tabbar-4.png) ; background-size : 0.35rem 0.35rem }

